<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易学生管理系统</title>
    <link rel="stylesheet" href="../bootstrap-5.3.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js">
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
        th{
            background-color: cornflowerblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <h3>简易学生管理系统</h3>
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" placeholder="请输入用户名" class="form-control" v-model="newStudent.name">
        </div>
        <div>
            <label for="age">年龄：</label>
            <input type="text" id="age" placeholder="请输入年龄" class="form-control" v-model.number="newStudent.age">
        </div>
        <div>
            <span>性别：</span>
            <select v-model="newStudent.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <button type="button" class="btn btn-danger" @click="creatNewstudent()">创建新用户</button>
        <hr>
        <h3 class="h3 text-info">学生信息表</h3>
        <button type="button" @click="avg()">显示所有学生的平均年龄</button>
        <button type="button" @click="sortStudent()">按年龄升序显示学生信息</button>
        <table class="table table-striped table-bordered table-hover">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tr v-for="(student,index) in filteredStudents" :key="index">
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
                <td>{{student.sex}}</td>
                <td>
                    <button type="button" class="btn btn-primary">修改</button>
                    <button type="button" class="btn btn-danger" @click="deleteStudent(index)">删除</button>
                </td>
            </tr>
        </table>
        按名字搜：<input type="text" v-model="search">
        <!-- <button type="button" @click="filterStudents()" class="btn btn-primary">搜索</button> -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                students:[
                    {name:'jack',age:20,sex:'男'},
                    {name:'rose',age:22,sex:'女'},
                    {name:'job',age:18,sex:'男'},
                    {name:'jane',age:20,sex:'男'}
                ],
                newStudent:{name:"",age:0,sex:"男"},
                search: "",
                // 用于存储要修改的学生信息
                editStudentData: { name: "", age: 0, sex: "男" },
                // 存储要修改的学生在数组中的索引
                editStudentIndex: null
            },            
            methods: {
                creatNewstudent(){
                    if(this.newStudent.name==""){
                        alert("姓名·不能·为空·");
                        return;
                    }
                    if(this.newStudent.age<10){
                        alert("年龄·不能·小于10·");
                        return;
                    }
                    this.students.unshift(this.newStudent);
                    this.newStudent={name:"",age:0,sex:"男"}
                },
                deleteStudent(index){
                    this.students.splice(index,1);
                },
                avg(){
                    alert('平均年龄：'+ this.avgAge);
                },
                sortStudent(){
                    this.students.sort((a, b) => a.age - b.age);
                },
                // 打开修改模态框并填充数据
                editStudent(index) {
                    this.editStudentIndex = index;
                    this.editStudentData = { ...this.students[index] };
                    const myModal = new bootstrap.Modal(document.getElementById('editModal'));
                    myModal.show();
                },
                // 保存修改后的学生信息
                saveEditStudent() {
                    if (this.editStudentData.name === "") {
                        alert("姓名·不能·为空·");
                        return;
                    }
                    if (this.editStudentData.age < 10) {
                        alert("年龄·不能·小于10·");
                        return;
                    }
                    this.students[this.editStudentIndex] = { ...this.editStudentData };
                    const myModal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
                    myModal.hide();                
            }
        },
            computed: {
                avgAge(){
                    var sum=0;
                    for(var i=0;i<this.students.length;i++){
                        sum+=this.students[i].age;
                    }
                    return Math.round(sum/this.students.length);
                },
                filteredStudents() {
                    if (this.search === "") {
                        return this.students;
                    }
                    return this.students.filter(item => item.name.includes(this.search));
                }
            }            
        });
    </script>
</body>
</html>